{% extends "base_template.html" %}

{% block main %}
<!--            博文内容区 -->
        <div class="col-md-8">
            <!--博客详情块-->
                <div class="card mb-3">
                    <div class="card-body">
                        <h3 class="card-title">{{ article.title }}</h3>
                        <p class="card-text">作者：{{ article.username }} | 发布时间：{{ article.created_at }}</p>
                        <p class="card-text">{{ article.content|safe}}</p>
                        <p class="card-text text-right">阅读数: {{article_counts}} 次</p>
                    </div>
                </div>
<!--            评论区-->
             <div class="card mb-3">
                <div class="card-body">
                        <h5 class="card-title">发表评论</h5>
                        
                            {% csrf_token %}
                            <div class="mb-3">
                                <label for="comment" class="form-label">评论内容</label>
                                <input type="hidden" id="commentor" value="{{ request.session.username }}">
                                <input type="hidden" id="blog" value="{{article.title}}">
                                <textarea class="form-control" id="comment"  rows="3" required></textarea>
                            </div>
                            {% if request.session.username %}
                               <button  id="submit" class="btn btn-primary float-end">提交评论</button>
                            {% else %}
                                <button disabled="disabled" class="btn btn-primary float-end">提交评论</button>
                            {% endif %}
                        
                </div>
             </div>
<!--            评论列表-->
            <div class="card mb-3">
                <div class="card-body">
                    <h5 class="card-title">评论列表</h5>
                    <ul class="list-group">
                        {% for comment in comments %}
                        <li class="list-group-item">
                            <p>{{ comment.commentor }}-{{ comment.created_at }}</p>
                            <p>{{ comment.content }}</p>
                        </li>
                        {% empty %}
                        <li class="list-group-item">暂无评论</li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        </div>
 <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>

  $('#submit').click(function(){
     var params={};
     params.commentor=$('#commentor').val();
     params.blog=$('#blog').val();
     params.comment=$('#comment').val();
     console.log(params)
     $.post("/blog/comment/",params,function(res){
            if(res.code==1){
               alert("评论成功！");
            
            }else if(res.code==-1){
               alert("言论不当，无法提交!");
               
            }else{
               alert("提交失败!");
             }
             location.reload();
         })      
  
  })

</script>
{% endblock %}